<template>
    <div>

        <!-- 内容 -->
        <div class="content">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getData">
                <div v-for="(el, index) in DangerProjectList" :key="index" style="margin: 14px 0;"
                    @click="goDetail(el)">
                    <div class="titleClass">
                        <img style="margin:9px 12px 10px 11px;width:17px;height: 17px;"
                            src="../../../assets/images/矩形装饰.png">
                        <span class="specialText"> {{ el.gdpName }}</span>

                    </div>
                    <div class="contentClass" style="height: 116px;overflow: auto;
                    justify-content: space-around;flex-direction:column;">
                        <p style="display: flex;align-items: center;height: 28px;">
                            <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <span>风险等级：</span>
                            <span>{{ el.dangerlevelSet.gdpName }}</span>
                        </p>
                        <p style="display: flex;align-items: center;height: 28px;">
                            <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <span>施工进度：</span>
                            <span>{{ el.constructionState == '未开始' ?
                                el.constructionSchedule : el.constructionState == '进行中' ?
                                    el.constructionSchedule : el.constructionState == '已完成' ?
                                        el.constructionSchedule : '暂无' }}</span>
                        </p>
                        <p style="display: flex;align-items: center;height: 28px;">
                            <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <span>安全状态：</span>
                            <span>{{ el.safeState == '安全' ? "安全" : el.safeState == null ? "暂无" : "不安全" }}</span>
                        </p>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useAppStore } from "../../../store";
import { GetGreatDangerProjectList, } from "@/api";
import { CreatedFormData } from "@/utils/CreatedFormData";
import { useRouter } from "vue-router";
export default defineComponent({
    name: 'dangerousProject',
    setup() {
        const { projectInfo } = useAppStore()
        const router = useRouter();
        const DangerProjectList = ref([])
        const loading = ref(false);
        const finished = ref(false);
        const pageIndex = ref(1);
        const getData = async () => {
            let fd = CreatedFormData(
                {
                    xid: projectInfo.id,
                    searchword: '',
                    page: pageIndex.value,
                    limit: 10,
                    nowuserid: 0
                })
            const res = await GetGreatDangerProjectList(fd);
            if (res.data) {
                DangerProjectList.value = DangerProjectList.value.concat(res.data);
                pageIndex.value++;
                loading.value = false;
                if (DangerProjectList.value.length >= res.count) {
                    finished.value = true;
                }
            }
        }
        const goDetail = (el) => {
            router.push({
                path: '/BDangerousProjectDetail',
                query: {
                    id: el.id,
                }
            })
        }
        onMounted(() => { });


        return {
            DangerProjectList,
            loading,
            finished,
            getData,
            goDetail,
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    display: flex;
    align-items: center;
    background: url('../../../assets/images/Group9436.png') no-repeat;
    background-size: 100% 100%;
}

.contentClass {
    display: flex;
    justify-content: start;
    padding: 28px 3%;
    background-color: rgba(33, 46, 90, 0.5);
    font-size: 28px;

}

.contentClass p {
    border-bottom: 1px solid #728b9a6b;
}

.contentClass p:last-child {
    border-bottom: none;
}

.specialText {
    text-indent: 0em;
    padding-left: 0em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 6px;
}
</style>